import React, { useState } from 'react';
import {
    View, Text, TouchableOpacity, Image,
} from 'react-native';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Modal } from '@ant-design/react-native';
import styles from './styles';
import Tag from '../Tag';
import { delNoteBook } from '../../../../comconfig/sqlfun';
import { debounce } from '../../../../utils/common';

const Item = ({ navigation, objItem, getList }) => {
    const tagArr = JSON.parse(objItem.tag);
    // setTags();
    const [show, setShow] = useState(false);
    return (
        <View style={styles.bookbg}>
            <TouchableOpacity
                onPress={() => navigation.navigate('笔记本',
                    { title: objItem.name, id: objItem.bookid })}
                onLongPress={() => Modal.operation([
                    {
                        text: '删除',
                        onPress: () => {
                            setShow(true);
                        },
                        style: { color: '#0F8DE9' },
                    },
                    {
                        text: '编辑',
                        onPress: () => debounce(() => navigation.push('创建笔记本',
                            {
                                bookid: objItem.bookid, getList, isEditing: true,
                            })),
                        style: { color: '#0F8DE9' },
                    },
                ])}
            >
                <View
                    style={{ flexDirection: 'row', justifyContent: 'space-between' }}
                >
                    <View>
                        <Text style={styles.title}>{objItem.name}</Text>
                        <View style={styles.tag}>
                            {
                                tagArr.map((item, i) => (
                                    <Tag
                                        key={Math.random() * 100}
                                        text={item}
                                        editable={false}
                                        index={i}
                                    />
                                ))
                            }
                        </View>
                    </View>
                    <View style={styles.cover}>
                        <Image
                            style={styles.image}
                            source={{
                                uri: objItem.coveruri,
                            }}
                            defaultSource={require('../../../../assets/images/cover2.jpeg')}
                        />
                    </View>
                </View>
                <View style={styles.time}>
                    <Text>{moment(objItem.creattime).format('YY-MM-DD')}</Text>
                </View>
            </TouchableOpacity>

            <Modal
                title="是否删除笔记本"
                transparent
                onClose={() => { setShow(false); }}
                maskClosable
                visible={show}
                footer={[
                    {
                        text: '取消',
                        onPress: () => {
                            setShow(false);
                        },

                    },
                    {
                        text: '确定',
                        onPress: () => {
                            delNoteBook(parseInt(objItem.bookid, 10));
                            getList();
                        },
                    },
                ]}
            >
                <View style={{ paddingVertical: 20 }}>
                    <Text style={{ textAlign: 'center' }}>删除笔记本将会把里面的笔记也一并删除</Text>
                    <Text style={{ textAlign: 'center' }}>请慎重删除</Text>
                </View>
            </Modal>
        </View>
    );
};
Item.defaultProps = {
    objItem: {},
    getList: () => {},
};
Item.propTypes = {
    objItem: PropTypes.objectOf(PropTypes.any),
    getList: PropTypes.func,

};

export default Item;
